<template>
	<view class="lease_bill_stages">
		<view class="insNav">
			 <view class="arrLfet" @tap="backNav">
			 	<image src="@/bundle/static/images/arr-left.png" mode="aspectFit"></image>
			 </view>
			<view class="">
				<!-- <u-icon name="arrow-left" color="#ffffff" size="32"></u-icon> -->
				
				<text>分期详情</text>
			</view>
		</view>
		<view class="">
				<image src="@/bundle/static/images/bgmstatus.png" mode="aspectFit" class="bgmimg"></image>
		</view>
	
		<view class="container u-m-t-80">
			<view class="pay-status u-p-t-30 u-p-b-40">
				<view class="">
					<image src="@/bundle/static/images/completedicon.png" mode="aspectFit" v-if="orderDetail.pay_status==1">
					</image>
					<image src="@/bundle/static/images/refundicon.png" mode="aspectFit" v-else></image>

				</view>
				<view class="" v-if="orderDetail">
					{{orderDetail.pay_status==1?'已成功还款':orderDetail.pay_status==2?'已退款':'已成功还款'}}
					<text v-if="orderDetail.finish_role==1"></text>
					<text v-if="orderDetail.finish_role==2">(客服)</text>
					<text v-if="orderDetail.finish_role==3">(系统代扣)</text>
				</view>
				<view class="">
					{{orderDetail.pay_amount}}
				</view>
			</view>
			<view class="stages-detail row-between u-m-t-80">
				<text>还款租金【{{orderDetail.current_periods}}/{{orderDetail.periods}}期】</text>
				<text>￥{{orderDetail.rent}}</text>
			</view>
			<view class="stages-detail row-between" v-if="Number(orderDetail.late_fee)!=0">
				<text>逾期滞纳金</text>
				<text>￥{{orderDetail.late_fee}}</text>
			</view>
			<view class="stages-detail row-between" v-if="Number(orderDetail.change_amount)!=0">
				<text>限时活动</text>
				<text style="color: #E95643">￥{{orderDetail.change_amount}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		billRepayment
	} from '@/api/lease.js'
	export default {
		data() {
			return {
				reletId: 0, //账单订单id
				orderDetail: {},
				iconSuccess: '@/bundle/static/images/completedicon.png',
				iconRefund: '@/bundle/static/images/refundicon.png'
			}
		},

		methods: {
			//自定义返回
			backNav(){
				uni.navigateBack()
			},
			// 初始化数据
			indata() {
				billRepayment({
					id: this.reletId,
					action: 'info'
				}).then(res => {
					if (res.code != 1) return;
					this.orderDetail = res.data;

				})
			},

			//立即支付
			confirmReturn() {
				uni.showLoading({
					title: '正在提交...',
					mask: true
				});
				const id = this.orderDetail.id;
				billRepayment({
					action: 'submit',
					id: id
				}).then(res => {
					if (res.code == 1) {
						const data = res.data;
						this.$toast({
							title: res.msg,
							icon: 'success'
						});
						uni.hideLoading();
						//跳转支付页面
						uni.redirectTo({
							url: `/pages/payment/payment?from=${data.from}&order_id=${data.order_id}`
						})
					}
				}).catch(() => {
					uni.hideLoading();
				})

			},


		},

		onLoad(options) {
			const id = options.id
			this.reletId = id;
		},

		onShow() {
			this.indata()
		}
	}
</script>

<style lang="scss" scoped>
	.lease_bill_stages {
		padding: 0 24rpx 0 24rpx;
		position: relative;
		padding-top: 80rpx;
		width: 100%;
	}
	.bgmimg{
		width: 100%;
		height: 886rpx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		z-index: 0;
	}

	.container {
		position: absolute;
		width: 94%;
		padding: 22px;
		margin-bottom: 20rpx;
		border-radius: 14rpx;
		background-color: #FFFFFF;
		z-index: 99;
		

		image {
			border-radius: 12rpx;
		}
	}

	.stages-detail {
		padding: 32rpx 24rpx;
		border-bottom: 1rpx solid #00000011;

		>text:nth-child(1) {
			color: #00000066;

			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 28rpx;
		}

		>text:nth-child(2) {
			color: #000000e6;

			font-size: 36rpx;
			font-style: normal;
			font-weight: 900;
			line-height: 36rpx;
		}
	}

	.pay-status {
		text-align: center;
		border-bottom: 1rpx dashed #0000001a;
		z-index: 999;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		>view:nth-child(1) {}

		>view:nth-child(2) {
			color: #000000e6;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 28rpx;
			margin: 34rpx 0;
		}

		>view:nth-child(3) {
			color: #000000e6;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 900;
			line-height: 48rpx;
		}
	}
	.insNav{
		height: 108rpx;
		width: 100%;
		 color: #ffffff;
		 text-align: center;
		 font-size: 32rpx;
		 font-style: normal;
		 font-weight: 500;
		 line-height: 102.45rpx;
		 position: relative;
		 padding-right: 10rpx;
		 z-index: 99;
		 image{
			 width: 18rpx;
			 height: 34rpx;
		 }
		 .arrLfet{
			 position: absolute;
			 width: 120rpx;
			 height: 64rpx;
			 left: 0;
			 top: 6rpx;
			 text-align: left;
             padding-left: 10rpx;			
		 }
	}
</style>